
//1.下包并引入路由
import Vue from "vue";
import VueRouter from 'vue-router';
// import Login from '@/pages/Login';
// import Home from '@/pages/Home';
// import Game from '@/pages/Home/Game';
// import Music from '@/pages/Home/Music';
// import News from '@/pages/Home/News';
// import NotFound from '@/pages/NotFound/404';
// import MusicDetail from '@/pages/Home/Music/MusicDetail'
const Login = () => import('@/pages/Login');
const Home = () => import('@/pages/Home');
const Game = () => import('@/pages/Home/Game');
const Music = () => import('@/pages/Home/Music');
const News = () => import('@/pages/Home/News');
const NotFound = () => import('@/pages/NotFound/404');
const MusicDetail = () => import('@/pages/Home/Music/MusicDetail');
//2.应用路由插件
Vue.use(VueRouter)
//3.创建路由器，并在内部配置路由模式和路由表
const router = new VueRouter({
    mode: 'history',//模式
    routes: [ 
        //配置一级默认路由
        {
            path: '/',
            redirect: "home" //路径名 
        },
        /* 每一个对象都是一个路由规则,我们可以给路由规则一个名字,方便后边使用 */
        {
            path: '/login',
            component: Login,
            name: "Login",//命名路由
        },
        {
            path: '/home', 
            component: Home,
            //配置默认子路由方式3
            //外面写，不能直接写子路由路径名，还得加上父级路由路径
            // redirect: 'game', //错误示范
            redirect: '/home/game', //http://localhost:8080/home/game
            
            /* 如果某个路由拥有了默认子路由,我们一般不会在这个路由规则上命名 */
            // name: 'Home',
            //配置子路由
            children:[
                // //配置默认子路由方式1
                // {
                //     path: '',
                //     redirect: 'game' //http://localhost:8080/home/game
                // },
                // //配置默认子路由方式2
                // {
                //     path: '',
                //     component: Game, //http://localhost:8080/home
                // },
                {
                    path: '/home/game',
                    component: Game,
                    name: 'Game'
                },
                {
                    path: 'music',//直接写路径名，但是不能在前面加/
                    component: Music,
                    name: 'Music',
                    // 三级路由
                    children: [
                        {
                             /* params参数可以设置可选 */
                            path: 'MusicDetail/:id/:age?',
                            component: MusicDetail,
                            name: 'MusicDetail'
                        }
                    ]
                },
                {
                    path: 'news',
                    component: News,
                    name: 'News'
                },
            ]
        },
        {
            path: '/*', 
            component: NotFound,
        },
    ]

})
//4.暴露router，注入到vue实例中
export default router;